<!DOCTYPE html>
<html  lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>
        黑白名单
    </title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" th:href="@{/css/main.css}" media="all">
    <script type="text/javascript" th:src="@{/lib/loading/okLoading.js}"></script>
    <link rel="stylesheet" th:href="@{/css/bootstrap.css}">
    <!--导入ElementUI样式列表，css样式一般都在页面头部-->
    <link rel="stylesheet" th:href="@{/css/index.css}">
</head>
<bo>
<div class="x-nav">
            <span class="layui-breadcrumb">
              <a><cite>首页</cite></a>
              <a><cite>停车</cite></a>
              <a><cite>黑白名单</cite></a>
            </span>
    <a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right"  href="javascript:location.replace(location.href);" title="刷新"><i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body" style="padding-top: 20px;" id="app">
    <div>

        <span class="demonstration">搜索关键字</span>
        <el-input v-model="searchMap.carCode" style="width: 20%" placeholder="请输入车牌号"></el-input>
        <el-button type="primary" plain @click="searchMap.pageNum=1;search()">搜索</el-button>
    </div>
    <br>
    <table class="layui-table">
        <thead>
        <tr>
            <th>
                <input type="checkbox" id="allChecked" :checked="checkedIDs.length===blackList.length"
                       @click="allChecked">
            </th>
            <th>
                名单ID
            </th>
            <th>
                停车场
            </th>
            <th>
                车牌号
            </th>
            <th>
                开始时间
            </th>
            <th>
                结束时间
            </th>
        </tr>
        </thead>
        <tbody id="x-img">
        <tr v-for="(black,index) in blackList">
            <td>
                <input type="checkbox" :id="'id'+black.id" :value="black.id" v-model="checkedIDs">
            </td>
            <td>{{black.id}}</td>
            <td>{{black.depotName}}</td>
            <td>{{black.carCode}}</td>
            <td>{{dateFormat(black.createTime)}}</td>
            <td>{{dateFormat(black.updateTime)}}</td>
        </tr>
    </table>
        <el-pagination
                background
                @size-change="handleSizeChange"
                @current-change="handleCurrentChange"
                :page-size="searchMap.pageSize"
                layout="prev, pager, next,sizes"
                :page-sizes="[2,10,20]"
                style="text-align: right;"
                :total="total">
        </el-pagination>
</div>
<script th:src="@{/lib/layui/layui.js}" charset="utf-8"></script>
<!--js脚本一般是放在页面尾部-->
<!--Vue js脚本-->
<script th:src="@{/js/vue.js}" charset="utf-8"></script>
<!--引入ElementUI组件库-->
<script th:src="@{/js/index.js}" charset="utf-8"></script>
<!--引入Axios js脚本-->
<script th:src="@{/js/axios.js}" charset="utf-8"></script>
<!--引入时间插件包Momentjs-->
<script th:src="@{/js/moment.min.js}" charset="utf-8"></script>
<script>
    var app = new Vue({
        el: "#app",//声明当前Vue在页面的作用域、
        data:{
            checkedIDs:[],
            blackList:[],
            total:10,
            searchMap:{"carCode":"","pageNum":1,"pageSize":2},

        },
        methods:{
            //分页查询停车列表
            search(){
                axios.post("/back/search",this.searchMap).then((res)=>{
                    console.log(res)
                    app.blackList = res.data.data;
                    app.total = res.data.total;
                });
            },

            //全选、全不选方法-
            allChecked: function () {
                if (this.checkedIDs.length === this.blackList.length) {
                    // 全不选
                    this.checkedIDs = [];

                } else {
                    this.checkedIDs = [];
                    // 全选
                    this.entryList.forEach((item) => {
                        this.checkedIDs.push(item.id); // 与checkbox的value统一
                    })
                }
            },
            //handleSizeChange每页数量发生变化后触发的方法
            handleSizeChange(pageSize) {
                this.searchMap.pageSize = pageSize;
                this.search();
            },
            //handleCurrentChange页码变化触发方法
            handleCurrentChange(pageNum) {
                this.searchMap.pageNum = pageNum;
                this.search();
            },

            //日期格式化方法
            //date 要进行格式的日期 ；format 格式化的样式
            dateFormat(date,format){
                //默认格式化字符串"YYYY-MM-DD HH:mm:ss"
                if(format == null || format == ''){
                    format = "YYYY-MM-DD  HH:mm:ss";
                }
                return moment(date).format(format);
            },
            /*添加*/
            admin_add(title, url, w, h) {
                this.x_admin_show(title, url, w, h);
            },
            //编辑
            depot_edit(title, url, id, w, h) {
                url = url + "?id=" + id;
                this.x_admin_show(title, url, w, h);
            },
            /*弹出层*/
            /*
                参数解释：
                title	标题
                url		请求的url
                id		需要操作的数据id
                w		弹出层宽度（缺省调默认值）
                h		弹出层高度（缺省调默认值）
            */
            x_admin_show(title, url, width, height) {
                if (title == null || title == '') {
                    title = false;
                }
                ;
                if (url == null || url == '') {
                    url = "404.html";
                }
                ;
                if (width == null || width == '') {
                    width = 800;
                }
                ;
                if (height == null || height == '') {
                    height = ($(window).height() - 50);
                }
                ;

                layer.open({
                    type: 2,
                    area: [width + 'px', height + 'px'],
                    fix: false, //不固定
                    maxmin: true,
                    shadeClose: true,
                    shade: 0.4,
                    title: title,
                    content: url,
                    cancel: function (index, layero) {
                        //使用右上角x关闭弹窗层，回调方法，重新加载页面数据，让修改或者新增的数据立马显示在页面上
                        app.search();
                    }
                });
            },
            /*关闭弹出框口*/
            x_admin_close() {
                var index = parent.layer.getFrameIndex(window.name);
                parent.layer.close(index);
            }
        },
        created: function () {//Vue生命周期方法，加载页面时会执行该方法
            layui.use(['laydate', 'element', 'laypage', 'layer'], function () {
                $ = layui.jquery;//jquery
                layer = layui.layer;//弹出层
                okLoading.close($);
                layer.ready(function () { //为了layer.ext.js加载完毕再执行
                    layer.photos({
                        photos: '#x-img'
                    });
                });
            });
            //初始页面获取小区列表信息
            this.search();

        }
    });

</script>

    </bo>
    </html>